<template>
  <LayoutContainer
    :store="store"
    :show-grid="showGrid"
    :is-fullscreen="isFullscreen"
    @get-guidelines="handleGetGuidelines"
    @on-set-canvas-style="handleSetCanvasStyle"
  >
    <template #header>
      <LayoutHeader></LayoutHeader>
    </template>
    <template #left>
      <LayoutLeft></LayoutLeft>
    </template>
    <template #main>
      <LayoutMain :store="store"></LayoutMain>
    </template>
    <template #right>
      <LayoutRight :store="store"></LayoutRight>
    </template>
  </LayoutContainer>
</template>

<script setup lang="ts">
import LayoutContainer from '@/components/LayoutContainer/index.vue'
import LayoutHeader from './modules/layout-header/index.vue'
import LayoutLeft from './modules/layout-left/index.vue'
import LayoutMain from '@/components/LayoutMain/index.vue'
import LayoutRight from './modules/layout-right/index.vue'
import { useDiyHooks } from '@/hooks/useDiyHooks'
import useCertStore from '@/stores/modules/cert'
import { storeToRefs } from 'pinia'

/**
 * 尽量通过传入store去操作各个公共的hooks/组件
 * 现在业务虽然只是diy证书模板，以后有可能扩展diy其他模板
 */
const store = useCertStore()
const { isFullscreen, showGrid } = storeToRefs(store)
const { handleGetGuidelines, handleSetCanvasStyle } = useDiyHooks(store)
</script>

<style scoped></style>
